<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理</title>
  <link rel="stylesheet" type="text/css" href="../static/css/iview.css">
  <script type="text/javascript" src="../static/js/vue.mini.js"></script>
  <script type="text/javascript" src="../static/js/iview.mini.js"></script>
  <script type="text/javascript" src="../static/js/jquery.mini.js"></script>
  <!--异步请求两个必须的文件-->
  <script type="text/javascript" src="../static/js/axios.mini.js"></script>
  <script type="text/javascript" src="../static/js/qs.mini.js"></script>
    <script type="text/javascript" src="../static/js/node_modules/bluebird/js/browser/bluebird.js"></script>
    <script type="text/javascript" src="../static/js/node_modules/babel-polyfill/dist/polyfill.js"></script>

</head>
    <style>
    #preview{
        border: 1px solid #bfd2e1;
        width: 800px;
        height: 500px;
        font-family: Arial, Helvetica, sans-serif,"宋体";
        margin-left:10px;
        margin-bottom:10px;
    }
    #map_container{
        height: 500px;
    }
</style>
<body>
<div id="app">
  <div style="font-size: 20px; margin-bottom: 20px;margin-top: 20px;margin-left: 8px">
    <i-button @click="add">添加</i-button>
    <i-button @click="update">修改</i-button>
    <i-button @click="del">删除</i-button>
  </div>

  <Modal v-model="visible" title="签到管理">
    <i-form ref="formValidate" :model="sign" :rules="ruleValidate" :label-width="80">
      <form-item label="签到周次" prop="week">
        <i-input v-model="sign.week_num" placeholder="签到周次"></i-input>
      </form-item>
      <form-item label="签到楼号" prop="lou">
        <i-input v-model="sign.lou" placeholder="签到楼号"></i-input>
      </form-item>
      <form-item label="最早签到时间" prop="time">
        <i-input v-model="sign.start_time" placeholder="签到时间" style="display: none">{{sign.start_time}}</i-input>
        <Date-picker
                type="datetime" format="yyyy-MM-dd HH:mm"
                placeholder="请选择日期..." @on-change="changeDate"
        ></Date-picker>
      </form-item>
        <form-item label="最晚签到时间" prop="time">
            <i-input v-model="sign.end_time" placeholder="签到时间" style="display: none">{{sign.end_time}}</i-input>
            <Date-picker
                    type="datetime" format="yyyy-MM-dd HH:mm"
                    placeholder="请选择日期..." @on-change="changeDate_1"
            ></Date-picker>
        </form-item>
      <form-item label="签到定位" prop="map">
        <!--<i-input v-model="sign.map" placeholder="选择签到地址"></i-input>-->
          <p>{{alert}}</p>
         <i-map style="display: none" v-model="sign.longitude">经度{{sign.longitude}}</i-map>
         <i-map style="display: none" v-model="sign.latitude">维度{{sign.latitude}}</i-map>
        <i-button @click="getMap">选择打卡地点</i-button>
      </form-item>
      <form-item label="签到课程" prop="course_id" >
        <!--<i-input v-model="sign.course_id" placeholder="签到课程" >{{course_id}}</i-input>-->
        <i-Select v-model="course_id" style="width:160px;height:30px;" @on-change='change_status(course_id)'>
          <i-Option v-for="item in course" :value="item.id" :key="item.id" >{{ item.course_name }}+{{item.course_code}}</i-Option>
        </i-Select>
      </form-item>
      <form-item label="签到班级号" prop="grade">
        <i-input v-model="sign.class_grade" placeholder="签到班级号：例如151121XXX"></i-input>
      </form-item>
        <form-item label="最小的签到范围" prop="grade">
            <i-input v-model="sign.distance" placeholder="最小的签到范围：单位是公里(如500米请填写0.5)"></i-input>
        </form-item>
    </i-form>
    <div slot="footer">
      <i-Button type="ghost" shape="circle" class="ivu-btn ivu-btn-success ivu-btn-circle" @click="updateOrSave">确认
      </i-Button>
    </div>
  </Modal>

  <Modal
          v-model="mapShow"
          title="地图管理"
          @on-ok="sign_map"   width="840"          >
      <div id="preview">
          <div id="float_search_bar">
              <input type="text" id="keyword" />
              <button id="search_button">查找</button>
          </div>
          <div><span style="color:#00A3CE;">查询后点击地图,获得您的准确位置</span></div>
          <div id="map_container"></div>
      </div>
      <div>
          <input style="display: none" type="text" id="lon" /><br/>
          <input style="display: none" type="text" id="lat" />
      </div>
  </Modal>
  <i-Table border :columns="columns4" :data="listData"  @on-select="isSelect" @on-select-cancel="NoSelect" @on-select-all="all_ok" @on-select-all-cancel="all_cancel"></i-Table>
</div>
<script type="text/javascript" src="../static/js/sgin.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pxsC0oLwcX2Geg3ndrFau7PqGwH8DLyZ"></script>
<script type="text/javascript" src="../static/js/baiduMap.js"></script>
</body>
</html>
